<style scoped>
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .clear {
    clear: both;
    display: block;
  }
  .hide {
    display: none;
  }

  /*禁止选中*/
  .noSel {
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .clear {
    content: "";
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
    clear: both;
  }

  /*内容区*/
  .super-container {
    width: 100%;
    height: 100vh;
    background: #cccccc;
  }
  .super-container .section {
    width: 100%;
    height: 100vh;
    min-height: 8rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  .section-1 {
    z-index: 10;
  }
  .section-1 .plane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: all .5s linear;
    transform: translateX(-2000px);
    -webkit-animation: planeFly 8s linear infinite alternate;
    -moz-animation: planeFly 8s linear infinite alternate;
    -o-animation: planeFly 8s linear infinite alternate;
    -ms-animation: planeFly 8s linear infinite alternate;
    animation: planeFly 8s linear infinite alternate;
  }
  .section-1 .plane img {
    width: 100%;
  }
  .section-1 .plane.fly-in {
    -webkit-animation: plane-in 1.5s ease-out forwards;
    -moz-animation: plane-in 1.5s ease-out forwards;
    -o-animation: plane-in 1.5s ease-out forwards;
    -ms-animation: plane-in 1.5s ease-out forwards;
    animation: plane-in 1.5s ease-out forwards;
  }
  .section-1 .plane.fly-out {
    -webkit-animation: plane-out 1.3s ease-out forwards;
    -moz-animation: plane-out 1.3s ease-out forwards;
    -o-animation: plane-out 1.3s ease-out forwards;
    -ms-animation: plane-out 1.3s ease-out forwards;
    animation: plane-out 1.3s ease-out forwards;
  }
  .section-1 .plane .propeller {
    position: absolute;
    top: 51.7003%;
    left: 13.1%;
    width: 27.424%;
    height: 14.4474%;
    -webkit-animation: propellerRoate 0.2s linear infinite reverse;
    -o-animation: propellerRoate 0.2s linear infinite reverse;
    -ms-animation: propellerRoate 0.2s linear infinite reverse;
    -moz-animation: propellerRoate 0.2s linear infinite reverse;
    animation: propellerRoate 0.2s linear infinite reverse;
  }
  .section-1 .plane .propeller img {
    width: 100%;
  }
  .section-1 .beta-app-host {
    position: absolute;
    bottom: 9rem;
    left: 3.5rem;
    font-weight: bold;
    font-size: .9rem;
    font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  }


  /*飞机  飞翔动画 */
  @-webkit-keyframes planeFly {
    0%,
    50%,
    100% {
      -webkit-transform: translateX(0) translateY(0);
    }
    25% {
      -webkit-transform: translateX(-6px) translateY(-20px);
    }
    75% {
      -webkit-transform: translateX(6px) translateY(20px);
    }
  }
  @-moz-keyframes planeFly {
    0%,
    50%,
    100% {
      -moz-transform: translateX(0) translateY(0);
    }
    25% {
      -moz-transform: translateX(-6px) translateY(-20px);
    }
    75% {
      -moz-transform: translateX(6px) translateY(20px);
    }
  }
  @-o-keyframes planeFly {
    0%,
    50%,
    100% {
      -o-transform: translateX(0) translateY(0);
    }
    25% {
      -o-transform: translateX(-6px) translateY(-20px);
    }
    75% {
      -o-transform: translateX(6px) translateY(20px);
    }
  }
  @-ms-keyframes planeFly {
    0%,
    50%,
    100% {
      -ms-transform: translateX(0) translateY(0);
    }
    25% {
      -ms-transform: translateX(-6px) translateY(-20px);
    }
    75% {
      -ms-transform: translateX(6px) translateY(20px);
    }
  }
  @keyframes planeFly {
    0%,
    50%,
    100% {
      transform: translateX(0) translateY(0);
    }
    25% {
      transform: translateX(-6px) translateY(-20px);
    }
    75% {
      transform: translateX(6px) translateY(20px);
    }
  }
  /*飞机 飞入动画*/
  @-webkit-keyframes plane-in {
    0% {
      -webkit-transform: scale(1.2) translateX(2000px);
      transform: scale(1.2) translateX(2000px);
    }
    30% {
      -webkit-transform: scale(0.8) translateX(-160px);
      transform: scale(0.8) translateX(-160px);
    }
    100% {
      -webkit-transform: scale(1) translateX(0);
      transform: scale(1) translateX(0);
    }
  }
  @-moz-keyframes plane-in {
    0% {
      -moz-transform: scale(1.2) translateX(2000px);
      transform: scale(1.2) translateX(2000px);
    }
    30% {
      -moz-transform: scale(0.8) translateX(-160px);
      transform: scale(0.8) translateX(-160px);
    }
    100% {
      -moz-transform: scale(1) translateX(0);
      transform: scale(1) translateX(0);
    }
  }
  @-ms-keyframes plane-in {
    0% {
      -ms-transform: scale(1.2) translateX(2000px);
      transform: scale(1.2) translateX(2000px);
    }
    30% {
      -ms-transform: scale(0.8) translateX(-160px);
      transform: scale(0.8) translateX(-160px);
    }
    100% {
      -ms-transform: scale(1) translateX(0);
      transform: scale(1) translateX(0);
    }
  }
  @-o-keyframes plane-in {
    0% {
      -o-transform: scale(1.2) translateX(2000px);
      transform: scale(1.2) translateX(2000px);
    }
    30% {
      -o-transform: scale(0.8) translateX(-160px);
      transform: scale(0.8) translateX(-160px);
    }
    100% {
      -o-transform: scale(1) translateX(0);
      transform: scale(1) translateX(0);
    }
  }
  @keyframes plane-in {
    0% {
      transform: scale(1.2) translateX(2000px);
    }
    30% {
      transform: scale(0.8) translateX(-160px);
    }
    100% {
      transform: scale(1) translateX(0);
    }
  }
  /*飞机 飞出动画*/
  @-webkit-keyframes plane-out {
    0% {
      -webkit-transform: scale(1) translateX(0);
      transform: scale(1) translateX(0);
    }
    30% {
      -webkit-transform: scale(.8) translateX(160px);
      transform: scale(.8) translateX(160px);
    }
    100% {
      -webkit-transform: scale(1.2) translateX(-2000px);
      transform: scale(1.2) translateX(-2000px);
    }
  }
  @-moz-keyframes plane-out {
    0% {
      -moz-transform: scale(1) translateX(0);
      transform: scale(1) translateX(0);
    }
    30% {
      -moz-transform: scale(.8) translateX(160px);
      transform: scale(.8) translateX(160px);
    }
    100% {
      -moz-transform: scale(1.2) translateX(-2000px);
      transform: scale(1.2) translateX(-2000px);
    }
  }
  @-ms-keyframes plane-out {
    0% {
      -ms-transform: scale(1) translateX(0);
      transform: scale(1) translateX(0);
    }
    30% {
      -ms-transform: scale(.8) translateX(160px);
      transform: scale(.8) translateX(160px);
    }
    100% {
      -ms-transform: scale(1.2) translateX(-2000px);
      transform: scale(1.2) translateX(-2000px);
    }
  }
  @-o-keyframes plane-out {
    0% {
      -o-transform: scale(1) translateX(0);
      transform: scale(1) translateX(0);
    }
    30% {
      -o-transform: scale(.8) translateX(160px);
      transform: scale(.8) translateX(160px);
    }
    100% {
      -o-transform: scale(1.2) translateX(-2000px);
      transform: scale(1.2) translateX(-2000px);
    }
  }
  @keyframes plane-out {
    0% {
      transform: scale(1) translateX(0);
    }
    30% {
      transform: scale(.8) translateX(160px);
    }
    100% {
      transform: scale(1.2) translateX(-2000px);
    }
  }
  /*螺旋桨 转动动画*/
  @-webkit-keyframes propellerRoate {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @-moz-keyframes propellerRoate {
    0% {
      -moz-transform: rotate(0deg);
    }
    100% {
      -moz-transform: rotate(360deg);
    }
  }
  @-ms-keyframes propellerRoate {
    0% {
      -ms-transform: rotate(0deg);
    }
    100% {
      -ms-transform: rotate(360deg);
    }
  }
  @-o-keyframes propellerRoate {
    0% {
      -o-transform: rotate(0deg);
    }
    100% {
      -o-transform: rotate(360deg);
    }
  }
  @keyframes propellerRoate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes inBottomGoTop {
    0% {
      -webkit-transform: translateY(0px);
    }
    100% {
      -webkit-transform: translateY(-100%);
    }
  }
  @-moz-keyframes inBottomGoTop {
    0% {
      -moz-transform: translateY(0px);
    }
    100% {
      -moz-transform: translateY(-100%);
    }
  }
  @-ms-keyframes inBottomGoTop {
    0% {
      -ms-transform: translateY(0px);
    }
    100% {
      -ms-transform: translateY(-100%);
    }
  }
  @-o-keyframes inBottomGoTop {
    0% {
      -o-transform: translateY(0px);
    }
    100% {
      -o-transform: translateY(-100%);
    }
  }
  @keyframes inBottomGoTop {
    0% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  @-webkit-keyframes outBottomGoTop {
    0% {
      -webkit-transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(0px);
    }
  }
  @-moz-keyframes outBottomGoTop {
    0% {
      -moz-transform: translateY(-100%);
    }
    100% {
      -moz-transform: translateY(0px);
    }
  }
  @-o-keyframes outBottomGoTop {
    0% {
      -o-transform: translateY(-100%);
    }
    100% {
      -o-transform: translateY(0px);
    }
  }
  @-ms-keyframes outBottomGoTop {
    0% {
      -ms-transform: translateY(-100%);
    }
    100% {
      -ms-transform: translateY(0px);
    }
  }
  @keyframes outBottomGoTop {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0px);
    }
  }
  @-webkit-keyframes inTopGoBottom {
    0% {
      -webkit-transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(0px);
    }
  }
  @-moz-keyframes inTopGoBottom {
    0% {
      -moz-transform: translateY(100%);
    }
    100% {
      -moz-transform: translateY(0px);
    }
  }
  @-ms-keyframes inTopGoBottom {
    0% {
      -ms-transform: translateY(100%);
    }
    100% {
      -ms-transform: translateY(0px);
    }
  }
  @-o-keyframes inTopGoBottom {
    0% {
      -o-transform: translateY(100%);
    }
    100% {
      -o-transform: translateY(0px);
    }
  }
  @keyframes inTopGoBottom {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0px);
    }
  }
  @-webkit-keyframes outTopGoBottom {
    0% {
      -webkit-transform: translateY(0px);
    }
    100% {
      -webkit-transform: translateY(100%);
    }
  }
  @-moz-keyframes outTopGoBottom {
    0% {
      -moz-transform: translateY(0px);
    }
    100% {
      -moz-transform: translateY(100%);
    }
  }
  @-ms-keyframes outTopGoBottom {
    0% {
      -ms-transform: translateY(0px);
    }
    100% {
      -ms-transform: translateY(100%);
    }
  }
  @-o-keyframes outTopGoBottom {
    0% {
      -o-transform: translateY(0px);
    }
    100% {
      -o-transform: translateY(100%);
    }
  }
  @keyframes outTopGoBottom {
    0% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(100%);
    }
  }
  @-webkit-keyframes inTopGoBottom1 {
    0% {
      -webkit-transform: translateY(0px);
    }
    100% {
      -webkit-transform: translateY(100%);
    }
  }
  @-ms-keyframes inTopGoBottom1 {
    0% {
      -ms-transform: translateY(0px);
    }
    100% {
      -ms-transform: translateY(100%);
    }
  }
  @-moz-keyframes inTopGoBottom1 {
    0% {
      -moz-transform: translateY(0px);
    }
    100% {
      -moz-transform: translateY(100%);
    }
  }
  @-o-keyframes inTopGoBottom1 {
    0% {
      -o-transform: translateY(0px);
    }
    100% {
      -o-transform: translateY(100%);
    }
  }
  @keyframes inTopGoBottom1 {
    0% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(100%);
    }
  }
  @-webkit-keyframes outTopGoBottom1 {
    0% {
      -webkit-transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(0px);
    }
  }
  @-moz-keyframes outTopGoBottom1 {
    0% {
      -moz-transform: translateY(100%);
    }
    100% {
      -moz-transform: translateY(0px);
    }
  }
  @-o-keyframes outTopGoBottom1 {
    0% {
      -o-transform: translateY(100%);
    }
    100% {
      -o-transform: translateY(0px);
    }
  }
  @-ms-keyframes outTopGoBottom1 {
    0% {
      -ms-transform: translateY(100%);
    }
    100% {
      -ms-transform: translateY(0px);
    }
  }
  @keyframes outTopGoBottom1 {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0px);
    }
  }
  @-webkit-keyframes inBottomGoTop1 {
    0% {
      -webkit-transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(0px);
    }
  }
  @-ms-keyframes inBottomGoTop1 {
    0% {
      -ms-transform: translateY(-100%);
    }
    100% {
      -ms-transform: translateY(0px);
    }
  }
  @-moz-keyframes inBottomGoTop1 {
    0% {
      -moz-transform: translateY(-100%);
    }
    100% {
      -moz-transform: translateY(0px);
    }
  }
  @-o-keyframes inBottomGoTop1 {
    0% {
      -o-transform: translateY(-100%);
    }
    100% {
      -o-transform: translateY(0px);
    }
  }
  @keyframes inBottomGoTop1 {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0px);
    }
  }
  @-webkit-keyframes outBottomGoTop1 {
    0% {
      -webkit-transform: translateY(0px);
    }
    100% {
      -webkit-transform: translateY(-100%);
    }
  }
  @-moz-keyframes outBottomGoTop1 {
    0% {
      -moz-transform: translateY(0px);
    }
    100% {
      -moz-transform: translateY(-100%);
    }
  }
  @-ms-keyframes outBottomGoTop1 {
    0% {
      -ms-transform: translateY(0px);
    }
    100% {
      -ms-transform: translateY(-100%);
    }
  }
  @-o-keyframes outBottomGoTop1 {
    0% {
      -o-transform: translateY(0px);
    }
    100% {
      -o-transform: translateY(-100%);
    }
  }
  @keyframes outBottomGoTop1 {
    0% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  @-webkit-keyframes s3animateIn {
    0% {
      transform: translateY(-100px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  @-moz-keyframes s3animateIn {
    0% {
      -moz-transform: translateY(-100px);
    }
    100% {
      -moz-transform: translateY(0px);
    }
  }
  @-ms-keyframes s3animateIn {
    0% {
      -ms-transform: translateY(-100px);
    }
    100% {
      -ms-transform: translateY(0px);
    }
  }
  @-o-keyframes s3animateIn {
    0% {
      -o-transform: translateY(-100px);
    }
    100% {
      -o-transform: translateY(0px);
    }
  }
  @keyframes s3animateIn {
    0% {
      transform: translateY(-100px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  @-webkit-keyframes downloadTranslate {
    0% {
      -webkit-transform: translateY(30px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0px);
      opacity: 1;
    }
  }
  @-moz-keyframes downloadTranslate {
    0% {
      -webkit-transform: translateY(30px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0px);
      opacity: 1;
    }
  }
  @-ms-keyframes downloadTranslate {
    0% {
      -ms-transform: translateY(30px);
      opacity: 0;
    }
    100% {
      -ms-transform: translateY(0px);
      opacity: 1;
    }
  }
  @-o-keyframes downloadTranslate {
    0% {
      -o-transform: translateY(30px);
      opacity: 0;
    }
    100% {
      -o-transform: translateY(0px);
      opacity: 1;
    }
  }
  @keyframes downloadTranslate {
    0% {
      transform: translateY(30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }
  /*设置飞机在下列屏幕尺寸下的大小*/
  @media (min-width: 1280px) {
    .section-1 .plane {
      width: 680px;
      height: 336px;
    }
  }
  @media (max-width: 1279px) and (min-width: 960px) {
    .section-1 .plane {
      width: 400px;
      height: 200px;
    }
  }
  @media (max-width: 960px) {
    .section-1 .plane {
      width: 400px;
      height: 200px;
    }
  }
  @media (max-width: 680px) {
    .menue {
      display: none;
    }
  }
</style>

<template>
  <div class="loadingAir">
    <!--内容区-->
    <div class="super-container" id="superContainer">
      <!--第一屏-->
      <div class="section section-1">

        <!--飞机-->
        <div class="plane" id="plane" :class="{'fly-in':ok}">
          <img src="../assets/images/loading/plane.svg"/>
          <div class="propeller">
            <img src="../assets/images/loading/propeller.svg"/>
          </div>
        </div>

        <!--动态文字-->
        <div class="beta-app-host" id="betaAppHost"></div>

      </div>


    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        ok:true,
      }
    },
    methods: {
      loading(){
        var that = this;
        setTimeout(function () {
          that.ok = false;
          var arr = ['小主别急', ':',"正在努力为您加载..."];
//          var arr = ['小主别急正在努力为您加载...'];
          var betaAppHost = document.getElementById('betaAppHost');
          that.creattext(betaAppHost, arr);	//添加文字动画
        }, 1500);
      },
      creattext(id, arr){
          var speed = 100;
          var c = "", index = 0, pos = 0;
          var strLen = arr[0].length;
          var tlen = arr.length;
          var row = 0;
          appendWord();
          function appendWord() {
            c = '';
            row = Math.max(0, index - tlen);
            while (row < index) {
              c += arr[row++] + '\r\n';
            }
            id.innerText = c + arr[index].slice(0, pos) + "|";
            if (pos == strLen) {
              pos = 0;
              c = arr[index] + "\r\n";
              index++;
              if (index < tlen) {
                strLen = arr[index].length;
                setTimeout(appendWord, speed);
              } else {
                id.innerText = id.innerText.replace("|", "");
              }
            } else {
              pos++;
              setTimeout(appendWord, speed);
            }
          }
//          this.loading();//位子反复加载
      },
    },
    mounted(){
      this.loading();
    },
    update(){

    }
  }


</script>



